<template>
    <Header :title="type == 'login' ? '登录' : '注册'"></Header>
    <div class="auth">
        <img src="../assets/imgs/logo.png" alt="" class="logo">
        <van-form @submit="onSubmit" class="form-wrap" v-if="type == 'login'">
            <div class="form">
                <van-field v-model="username" name="username" label="账号" placeholder="请输入账号"
                    :rules="[{ required: true, message: '请填写账号' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </div>


            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
                <p @click="changeType('register')" class="change-btn">
                    前往注册
                </p>
            </div>
        </van-form>

        <van-form @submit="onSubmit" class="form-wrap" v-if="type == 'register'">
            <div class="form">
                <van-field v-model="username" name="username" label="账号" placeholder="请输入账号"
                    :rules="[{ required: true, message: '请填写账号' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field center clearable v-model="verify" label="验证码" placeholder="请输入验证码">
                    <template #button>
                        <VueImageVerify ref="verifyRef"></VueImageVerify>
                    </template>
                </van-field>
            </div>


            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" :loading="loading">
                    注册
                </van-button>
                <p @click="changeType('login')" class="change-btn">
                    登录已有帐号
                </p>
            </div>
        </van-form>
    </div>

</template>

<script>
import axios from '../utils/axios';
import { Toast } from 'vant';
import { reactive, ref, toRefs } from 'vue';
import Header from '../components/Header.vue';
import VueImageVerify from '../components/VueImageVerify.vue';
export default {
    components: {
        Header,
        VueImageVerify
    },
    setup() {

        const verifyRef = ref(null);

        const state = reactive({
            username: '',
            password: '',
            type: 'login',
            imageCode: '', //验证图片内的文字
            loading: false,
            verify: '' //验证码输入的内容
        })
        const onSubmit = async (values) => {
            try {
                if (state.type === "login") {
                    const { data } = await axios.post('/user/login', {
                        username: state.username,
                        password: state.password
                    })
                    console.log(data);
                    console.log(data.token);
                    localStorage.setItem('token', data.token);
                    window.location.href = "/"
                } else {
                    console.log(verifyRef);
                    // 从验证码组件获取验证码的值
                    state.imgCode = verifyRef.value.imgCode || "";
                    if (state.imgCode !== state.verify) {
                        // console.log("verifyRef.value.imgCode", verifyRef.value.imgCode);
                        Toast.fail('验证码错误')
                        return;
                    }
                    state.loading = true;
                    const { data } = await axios.post("/user/register", {
                        username: state.username,
                        password: state.password
                    });
                    Toast.success("注册成功");
                    state.type = "login";
                    state.loading = false;
                }
            }
            catch (err) {
                state.loading = false;
            }
        }

        const changeType = (type) => {
            state.type = type
        }

        return {
            ...toRefs(state),
            onSubmit,
            changeType,
            verifyRef
        }
    }
}
</script>

<style lang="scss" scoped>
.auth {
    height: calc(100% - 46px);
    padding: 30px 20px 0 20px;
    background-color: $primary-bg;

    .logo {
        width: 150px;
        display: block;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .form-wrap {
        border-radius: 10px;
        overflow: hidden;

        .van-cell:first-child {
            padding-top: 20px;
        }

        .van-cell:last-child {
            padding-bottom: 20px;
        }
    }

    .change-btn {
        text-align: center;
        margin: 10px 0;
        // color: @link-color;
        font-size: 14px;
    }
}
</style>